<template>
  <div class="home">
    <div class="home-header">
      <img v-if="logo" :src="logo" class="home-logo" />
    </div>
    <div class="banner">
      <img v-if="bannerBj" :src="bannerBj" class="home-banner" />
    </div>
    <div class="tabs">
      <div class="tabs-list" v-for="(item,index) in tabsList" :key="item.value" :class="tabsValue==item.value ? 'tabsValue':''" @click="tabsTap(item.value)">{{ item.lable}}</div>

    </div>
    <div class="banner">
      <img v-if="tabsValue==1" src="/src/assets/logo/banner-kp.png" class="home-banner" />
      <!-- <img v-else-if="tabsValue==2" src="/src/assets/logo/bannerKp1.png" class="home-banner" /> -->
      <img v-else-if="tabsValue==3" src="/src/assets/logo/bannerKp2.png" class="home-banner" />
      <img v-else-if="tabsValue==4" src="/src/assets/logo/bannerKp3.png" class="home-banner" />
      <img v-else-if="tabsValue==5" src="/src/assets/logo/bannerKp4.png" class="home-banner" />
    </div>
    <div class="centen" style="background-image: url('/src/assets/logo/bj-banner.png');background-size: 100% 100%;">
      <div class="centen-main">
        <div class="title">
          <img src="/src/assets/logo/home-jt.png" style="width:39px;">
          <span style="font-size: 32px;margin: 0 10px;">关于智箱界</span>
          <img src="/src/assets/logo/home-jt.png" style="width: 39px;">
        </div>
        <div style="font-size: 18px;margin-top: 30px;">智箱界是一个智能集装箱信息平台，覆盖集装箱的全生命周期。整合租箱、集装箱贸易、集卡、堆场四大核心业务。旨在通过智能化手段，为集装箱公司、货代公司、集卡公司、堆场公司提供全链路解决方案，实现“箱-货-车-场”一站式智能协同，帮助用户优化业务流程，提升管理效率。</div>
        <div class="list-on">
           <div class="list-on-ff">
             <img src="/src/assets/logo/home-list1.png" style="width:60px;">
             <div class="on-title">开放免费</div>
             <div class="on-bise">前期免费入驻，无任何隐藏收费项， 降低企业试错成本！</div>
           </div>
           <div class="list-on-ff">
             <img src="/src/assets/logo/home-list2.png" style="width:60px;">
             <div class="on-title">智能化操作</div>
             <div class="on-bise">操作简单到有“电脑就会用”，3天玩转所有功能！</div>
           </div>
           <div class="list-on-ff">
             <img src="/src/assets/logo/home-list3.png" style="width:60px;">
             <div class="on-title">安全保障</div>
             <div class="on-bise">企业级账号管理+数据加密， 生意安全有保障！</div>
           </div>
           <div class="list-on-ff">
             <img src="/src/assets/logo/home-list4.png" style="width:60px;">
             <div class="on-title">全角色赋能平台</div>
             <div class="on-bise">货代公司、集装箱公司、集卡公司、堆场公司等全角色，一站式解决全链路需求！</div>
           </div>
        </div>
      </div>
      <div class="centen-main">
        <div class="title">
          <img src="/src/assets/logo/home-jt.png" style="width:39px;">
          <span style="font-size: 32px;margin: 0 10px;">四大角色入驻智箱界的优势</span>
          <img src="/src/assets/logo/home-jt.png" style="width: 39px;">
        </div>
        <div class="list-on">
          <div class="list-for">
            <img src="/src/assets/logo/home-list7.png" class="list-bj">
            <div class="for-title">集装箱公司</div>
             <div class="for-bise">闲置箱远利用率提升50%<br>
              超期费回收率达100%<br>
              财务对账人力节省70%</div>
          </div>
          <div class="list-for">
            <img src="/src/assets/logo/home-list6.png" class="list-bj">
            <div class="for-title">货代公司</div>
             <div class="for-bise">租箱成本直降20%<br>
              租箱操作时间压缩50%<br>
             应收款账期缩短60%</div>
          </div>
          <div class="list-for">
            <img src="/src/assets/logo/home-list8.png" class="list-bj">
            <div class="for-title">集卡公司</div>
             <div class="for-bise">车辆满载率提升90%<br>
              电子运单替代纸质单据<br>
              调度效率提升200%</div>
          </div>
          <div class="list-for">
            <img src="/src/assets/logo/home-list9.png" class="list-bj">
            <div class="for-title">堆场公司</div>
             <div class="for-bise">堆存费收入增长35%<br>
             箱位利用率达95%<br>
              人工登记成本归零</div>
          </div>
          
        </div>
      </div>
       <div class="centen-main">
        <div class="title">
          <img src="/src/assets/logo/home-jt.png" style="width:39px;">
          <span style="font-size: 32px;margin: 0 10px;">功能介绍</span>
          <img src="/src/assets/logo/home-jt.png" style="width: 39px;">
        </div>
        <div class="tabsMain" style="background-image: url('/src/assets/logo/bj-banner2.png');background-size: 100% 100%;">
          <div class="tabsMain-list" v-for="(item,index) in tabsListOne" :key="item.value" :class="tabsValueOne==item.value ? 'tabsValueOne':''" @click="tabsTapOne(item.value)">{{ item.lable}}</div>
        </div>
        <div>
          <el-carousel height="500px" arrow="always" v-if="tabsValueOne==1">
            <el-carousel-item v-for="item in urlOne" :key="item">
              <img :src="item" style="width: 100%;">
            </el-carousel-item>
          </el-carousel>
          <el-carousel height="500px" arrow="always" v-else-if="tabsValueOne==2">
            <el-carousel-item v-for="item in urlTwo" :key="item">
              <img :src="item" style="width: 100%;">
            </el-carousel-item>
          </el-carousel>
          <el-carousel height="500px" arrow="always" v-else-if="tabsValueOne==3">
            <el-carousel-item v-for="item in urlThree" :key="item">
              <img :src="item" style="width: 100%;">
            </el-carousel-item>
          </el-carousel>
          <el-carousel height="500px" arrow="always" v-else-if="tabsValueOne==4">
            <el-carousel-item v-for="item in urlFour" :key="item">
              <img :src="item" style="width: 100%;">
            </el-carousel-item>
          </el-carousel>
        </div>
    </div>
    </div>
   
    <div class="centen centen-bj" style="background-image: url('/src/assets/logo/bj-banner1.png');background-size: 100% 100%;">
      <div class="centen-main">
        <div class="title">
          <img src="/src/assets/logo/home-jt.png" style="width:39px;">
          <span style="font-size: 32px;margin: 0 10px;">合作客户</span>
          <img src="/src/assets/logo/home-jt.png" style="width: 39px;">
        </div>
        <div class="numMain">
          <div class="numMain-list"><span>65+</span>企业客户</div>
          <div class="numMain-list"><span>30+</span>相关行业</div>
          <div class="numMain-list"><span>300+</span>覆盖城市</div>
        </div>
        <div class="hezuo">
          <img src="/src/assets/logo/home-list13.png" class="hezuo-list">
          <img src="/src/assets/logo/home-list13.png" class="hezuo-list">
          <img src="/src/assets/logo/home-list13.png" class="hezuo-list">
          <img src="/src/assets/logo/home-list13.png" class="hezuo-list">
          <img src="/src/assets/logo/home-list13.png" class="hezuo-list">
          <img src="/src/assets/logo/home-list13.png" class="hezuo-list">
          <img src="/src/assets/logo/home-list13.png" class="hezuo-list">
          <img src="/src/assets/logo/home-list13.png" class="hezuo-list">
          <img src="/src/assets/logo/home-list13.png" class="hezuo-list">

        </div>
      </div>  
      <div class="centen-main">
        <div class="title">
          <img src="/src/assets/logo/home-jt.png" style="width:39px;">
          <span style="font-size: 32px;margin: 0 10px;">招商合作</span>
          <img src="/src/assets/logo/home-jt.png" style="width: 39px;">
        </div>
        <div class="zhaos">
           <div class="zhaos-list">
            <img src="/src/assets/logo/home-list10.png" class="zhaos-list-img">
            <div class="zhaos-title">堆场</div>
            <div class="zhaos-tibs">一站式数字化赋能，解锁堆场运营新可能</div>
            <div class="zhaos-fot">
               <div class="zhaos-fot-list">
                <el-icon><UserFilled /></el-icon>
                <span>王本兰：13459708651 wnfore@163.com</span>
               </div>
               <div class="zhaos-fot-list">
                <el-icon><UserFilled /></el-icon>
                <span>王本兰：13459708651 wnfore@163.com</span>
               </div>
               <div class="zhaos-fot-list">
                <el-icon><UserFilled /></el-icon>
                <span>王本兰：13459708651 wnfore@163.com</span>
               </div>
            </div>
          </div>
           <div class="zhaos-list">
            <img src="/src/assets/logo/home-list11.png" class="zhaos-list-img">
            <div class="zhaos-title">箱主</div>
            <div class="zhaos-tibs">全生命周期守护，让集装箱管理更省心</div>
            <div class="zhaos-fot">
               <div class="zhaos-fot-list">
                <el-icon><UserFilled /></el-icon>
                <span>王本兰：13459708651 wnfore@163.com</span>
               </div>
               <div class="zhaos-fot-list">
                <el-icon><UserFilled /></el-icon>
                <span>王本兰：13459708651 wnfore@163.com</span>
               </div>
               <div class="zhaos-fot-list">
                <el-icon><UserFilled /></el-icon>
                <span>王本兰：13459708651 wnfore@163.com</span>
               </div>
            </div>
          </div>
           <div class="zhaos-list">
            <img src="/src/assets/logo/home-list12.png" class="zhaos-list-img">
            <div class="zhaos-title">用箱客户</div>
            <div class="zhaos-tibs">一站式服务，让用箱更高效</div>
            <div class="zhaos-fot">
               <div class="zhaos-fot-list">
                <el-icon><UserFilled /></el-icon>
                <span>王本兰：13459708651 wnfore@163.com</span>
               </div>
               <div class="zhaos-fot-list">
                <el-icon><UserFilled /></el-icon>
                <span>王本兰：13459708651 wnfore@163.com</span>
               </div>
               <div class="zhaos-fot-list">
                <el-icon><UserFilled /></el-icon>
                <span>王本兰：13459708651 wnfore@163.com</span>
               </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="foot">
      <div class="foot-main">
        <div class="foot-main-fl">
          <div class="fl-list">
            <div style="font-size: 12px;">售前咨询热线</div>
            <div style="font-size: 20px;">4008-830-830</div>
          </div>
          <div class="fl-list">
            <div style="font-size: 12px;">售前咨询热线</div>
            <div style="font-size: 20px;">4008-830-830</div>
          </div>
        </div>
        <div class="foot-main-cen">
          <div class="cen-list">
            <div style="color: #fff;">关于我们</div>
            <div>了解XX平台</div>
            <div>行业动态</div>
            <div>建议反馈</div>
          </div>
          <div class="cen-list">
            <div style="color: #fff;">支持与服务</div>
            <div>知识库</div>
            <div>帮助中心</div>
            <div>在线客服</div>
            <div>举报中心</div>

          </div>
          <div class="cen-list">
            <div style="color: #fff;">友情链接</div>
            <div>中国邮政物流官网</div>
            <div>德邦物流</div>
            <div>中国物流官网</div>
          </div>
        </div>
        <div class="foot-main-fr">
          <img src="/src/assets/logo/home-wx.png" style="width: 100px;height: 100px;">
          <div style="text-align: center;margin-top: 15px;font-size: 12px;">客服微信</div>
        </div>

      </div>
      <div class="foot-foot">
        <div class="flex-cen">
          <div style="margin-right: 100px;">©2025河南陆海国际智能科技有限公司</div>
          <div>豫ICP备20001205号</div>

        </div>
        <div class="flex-cen">
          <div style="margin-right: 100px;">法律声明</div>
          <div>隐私政策</div>

        </div>

      </div>
    </div>
  </div>
</template>

<script setup>
import { ElMessage, ElMessageBox } from "element-plus";
import { ref } from 'vue'
import logo from '@/assets/logo/zxj-logo.png'
import bannerBj from '@/assets/logo/banner-bj.png'
import bannerKp from '@/assets/logo/banner-kp.png'


const tabsList=ref([
  {
    lable:'租箱',
    value:1,
  },
  {
    lable:'集装箱贸易',
    value:3,
  }, {
    lable:'集卡',
    value:4,
  }, {
    lable:'堆场',
    value:5,
  },
])
const tabsListOne=ref([
  {
    lable:'集装箱公司',
    value:1,
  },
  {
    lable:'货代公司',
    value:2,
  }, {
    lable:'集卡公司',
    value:3,
  }, {
    lable:'堆场公司',
    value:4,
  },
])
const urlOne=ref([
  '/src/assets/logo/lunbo1.png',
  '/src/assets/logo/lunbo2.png',
  '/src/assets/logo/lunbo3.png',
  '/src/assets/logo/lunbo4.png'
])
const urlTwo=ref([
  '/src/assets/logo/lunbo5.png',
  '/src/assets/logo/lunbo6.png',
  '/src/assets/logo/lunbo7.png',
])
const urlThree=ref([
  '/src/assets/logo/lunbo8.png',
])
const urlFour=ref([
  '/src/assets/logo/lunbo9.png',
])
const tabsValue=ref(1)
const tabsValueOne=ref(1)

const tabsTap=(item)=>{
tabsValue.value=item
}
const tabsTapOne=(item)=>{
tabsValueOne.value=item
}
</script>

<style lang='scss' scoped>
.home {
  width: 100%;
  min-height: 1000px;
  background-color: #eee;
  background: #ffffff;

  .home-header {
    width: 100%;
    height: 80px;
    background-color: white;
    box-sizing: border-box;
    padding: 20px;
  }

  .home-container {
    width: 80%;
    min-width: 1000px;
    background-color: white;
    margin: auto;
    box-sizing: border-box;
    padding: 20px 30px;
    margin-top: 20px;
  }

  .home-logo {
    float: left;
    width: 100px;
    margin-left: 8%;
  }
}
.home-banner{
  width: 100%;
  display: block;
}
.tabs{
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0 5%;
  background: #ffffff;
}
.tabs-list{
  padding: 20px 0px;
  width: 200px;
  text-align: center;
  color: #333333;
}
.tabsValue{
  background: #186DF5;
color: #ffffff;
}
.foot{
  background: #282828;
  
}
.foot-main{
  display: flex;
  justify-content: space-between;
  padding: 30px 10%;
  color: #ffffff;

}
.foot-foot{
  border-top: 1px solid #505050;
  padding: 30px 10%;
  display: flex;
  justify-content: space-between;
  color: #999999;
  font-size: 12px;

}
.fl-list{
  margin-bottom: 30px;
  div{
      margin-bottom: 15px;

  }
}
.foot-main-cen{
  flex: 1;
  display: flex;
  border-left: 1px solid #505050;
  margin-left: 100px;
  padding-left: 100px;
  
  .cen-list{
    margin-right: 200px;
    div{
      color: #999;
      margin-bottom: 15px;
    }
  }
}
.title{
  display: flex;
  justify-content: center;
  margin: 30px 0 0;
}
.centen-main{
  padding: 30px 10%;
}
.list-on{
  display: flex;
  justify-content: space-between;
  margin-top: 50px;
  .list-on-ff{
    text-align: center;
      color: #333333;
      width: 200px;

  }
  .on-title{
      margin-top: 10px;
      font-size: 18px;

  }
  .on-bise{
      margin-top: 10px;
    font-size: 14px;
  }
}
.list-for{
      position: relative;
    color: #ffffff;
  .list-bj{
    width: 200px;
  }
   .for-title{
      position: absolute;
      bottom: 110px;
      left: 0;
      width: 100%;
      font-size: 18px;
      text-align: center;
    }
    .for-bise{
        position: absolute;
      bottom: 30px;
      left: 0;
      width: 100%;
      text-align: center; 
      font-size: 14px;
    }
}
.numMain{
  margin-top: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 60px;
  .numMain-list{
    margin: 0 20px;
  }
  span{
    font-size: 44px;
    color: #0F6DF2;
    margin-right: 15px;
  }
}
.hezuo{
  margin-top: 50px;
display: flex;
flex-wrap: wrap;
.hezuo-list{
  margin: 10px;
  width: 18%;
}
}
.zhaos{
    margin-top: 50px;
display: flex;
justify-content: space-between;
.zhaos-list{
  width: 26%;
  background: #fff;
  border-radius: 6px;
  text-align: center;
  padding: 30px 20px;
  color: #333333;
}
.zhaos-title{
  color: #000;
  font-size: 20px;
  margin-top: 30px;
}
.zhaos-tibs{
  margin-top: 30px;

}
.zhaos-fot{
  margin-top: 30px;

}
.zhaos-fot-list{
  display: flex;
  align-items: center;
}
}

.tabsMain{
  display: flex;
  justify-content: center;
  margin: 30px auto;
  padding: 20px 0;
  width: 550px;
}
.tabsMain-list{
  padding: 0 30px;
  color: #2C2C2C;
  font-size: 18px;
  cursor: pointer;
}
.tabsValueOne{
  color: #2158F3;
}
</style>
